<template>
  <c-loading :loading="false">
    <view class="container evaluate">
      <view class="evaluate-box" v-for="item in list" :key="item.id">
        <view class="flex">
          <c-img class="avatar" default-src="/assets/imgs/default/avatar.png" :src="item.userAvatarUrl" />
          <view class="body grow">
            <view class="nickname">{{item.userNickName}}</view>
            <view class="text">{{ item.evaluateContent }}</view>
            {{ item.evaluateScore }}

            {{ item.isUseful }}
            {{ item.replyCount }}
          </view>
        </view>
      </view>
      <c-pager v-bind="pager"></c-pager>
    </view>
  </c-loading>
</template>
<script setup>
import { CButton, CLoading, CImg, CIcon, CPager } from '@/components';
import { usePager, useLoading } from '@/hooks';
import { View } from '@tarojs/components';
import api from '@/api';

const { options } = useLoading(() => {
  reload();
});
const { pager, list, reload } = usePager({
  immediate: false,
  handler: (skip, take) =>
    api.evaluate.evaluateList({
      id: options.value.id,
      skip,
      take
    })
});
</script>
<style lang="scss">
.evaluate.container {
  .evaluate-box {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 20px;
    .avatar {
      flex-shrink: 0;
      height: 60px;
      width: 60px;
      margin-right: 20px;
      border-radius: 50%;
    }
    .nick-name {
      font-size: 24px;
      color: var(--color-gray);
      margin-bottom: 10px;
    }
    .text {
      font-size: 26px;
      line-height: 1.6em;
    }
  }
}
</style>
